<template>
  <div>
    <head-container></head-container>
    <el-main class="shop_list_main_wrap">
      <div class="shop_list_main">
        <choose-mod @searchList='searchList' :page='page'></choose-mod>
        <section>
          <header class="list_show_head">
            <h3>综合排序</h3>
          </header>
          <section class="class_wrap">
            <div class="class_item"
              v-for="item in shopList"
              :key="item.id"
              @click="goToInfo(item.sku)">
              <h6>{{item.product}}</h6>
              <div class="class_info">
                <div class="class_time">{{item.specialty}}</div>
                <img :src="item.image" :alt="item.product">
                <div class="class_star">{{item.sex}} {{item.size}}</div>
              </div>
              <footer> 
                <span class="price">
                  ￥<span>{{item.price}}</span>
                </span>
              </footer>
            </div>
          </section>
          <section class="no_class" v-if="!shopList.length">暂无相关商品</section>
          <p v-if="shopList.length" style="text-align:center">
              <el-pagination
                @current-change = 'changeCurrent'
                layout="prev, pager, next"
                :page-count="pageCount">
              </el-pagination>
          </p>
        </section>
      </div>
    </el-main>
    <foot-container></foot-container>
  </div> 
</template>
<script>
import headContainer from '../components/headContainer'
import chooseMod from '../components/chooseMod'
import footContainer from '../components/footContainer'
export default {
  data(){
    return{
      shopList:[],
      total:1,
      page:0,
      pageCount:1
    }
  },
  components:{
    headContainer,
    footContainer,
    chooseMod
  },
  mounted(){
   
  },
  methods:{
    changeCurrent(val){
      this.page = val-1;
    },
    goToInfo(id){
      this.$router.push({ path:'shopInfo',query:{tag:'shoplist',id} })
    },
    searchList(d){
      this.total = d.pagination.total
      this.page = d.pagination.page
      this.pageCount = d.pagination.page_count
      this.shopList = d.data;
    }
  }  
}
</script>
<style scoped>
.shop_list_main{
  width: 1200px;
  margin:0 auto;
}
.list_show_head{
  height:42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom:2px solid #0078c5;
}
.list_show_head h3{
  background-color: #0078c5;
  color:#fff;
  line-height: 44px;
  padding:0 14px;
}
.sort_order{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sort_order span{
  width:40px;
  height:40px;
  cursor: pointer;
}
.isCategory{
  background-color: #e6e6e6;
}
.class_wrap{
  padding:20px 0;
  overflow: hidden;
}
.shop_list_main_wrap{
  min-height:680px;
  overflow: unset !important;
}
.class_item{
  width:390px;
  height:380px;
  padding:30px;
  border:1px solid #e5e5e5;
  float: left;
  box-sizing: border-box;
  background-color: #fff;
  transition: 0.6s;
  margin:10px 10px 0 0;
  text-align: left;
  cursor: pointer;
}
.class_item h6{
  font-size:18px;
  line-height: 30px;
  margin-bottom:5px;
}
.class_item img{
  height:200px;
  width:100%;
  margin-bottom:10px;
}
.class_item:hover{
  transform: translateY(-6px);
  border-top:1px solid #f13232 ;
}
.class_time{
  color:#999;
  font-size: 12px;
}
.class_star{
  line-height: 20px;
  margin-bottom:15px;
}
.class_star .title{
  color:#999;
  font-size: 14px;
}
.class_star .tri{
  color:#c0c0c0
}
.class_star .triNum{
  color:#f13232;
}
.class_item .class_info{
  border-bottom:1px solid #e5e5e5;
}
.class_item footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font:14px/28px '微软雅黑';
  color:#f13232
}
.class_item .price span{
  font-size: 22px;
  line-height: 30px;
}
.no_class{
  height:300px;
  text-align: center;
  font:20px/60px "微软雅黑"
}
</style>
